<template type="text/x-template" id="tpl-menu-editor">
    <div :id="id" class="row">
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">菜单层次</h3>
                </div>
                <div class="panel-body">
                    <ul :id="'ul-' + id" class="menu-hierarchy sortableLists list-group"></ul>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <form :id="'form-' + id" method="post" class="form-horizontal">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">菜单项</h3>
                    </div>
                    <div class="panel-body">
                        <div class="form-group required"
                             :class="{'has-error' : live.errors.id}">
                            <label class="col-sm-2 control-label">编号</label>
                            <div class="col-sm-10">
                                <input v-model="live.menuItem.id" type="text" class="form-control"/>
                                <div class="text-danger" v-if="live.errors.id">
                                    {{ live.errors.id }}
                                </div>
                            </div>
                        </div>
                        <div class="form-group"
                             :class="{'has-error' : live.errors.icon}">
                            <label class="col-sm-2 control-label">图标</label>
                            <div class="col-sm-10">
                                <input v-model="live.menuItem.icon" type="text" class="menu-item-icon form-control"/>
                                <div class="text-danger" v-if="live.errors.icon">
                                    {{ live.errors.icon }}
                                </div>
                            </div>
                        </div>
                        <div class="form-group required">
                            <label class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <div v-for="language in languages">
                                    <div class="input-group"
                                         :class="{'has-error' : live.errors.name[language.languageCode]}">
                                        <span class="input-group-addon">{{ language.languageCode }}</span>
                                        <input v-model="live.menuItem.name[language.languageCode]"
                                               type="text"
                                               placeholder="菜单项名称"
                                               class="form-control">
                                    </div>
                                    <div class="text-danger" v-if="live.errors.name[language.languageCode]">
                                        {{ live.errors.name[language.languageCode] }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group"
                             :class="{'has-error' : live.errors.href}">
                            <label class="col-sm-2 control-label">链接</label>
                            <div class="col-sm-10">
                                <input v-model="live.menuItem.href" type="text" class="form-control"/>
                                <div class="text-danger" v-if="live.errors.href">
                                    {{ live.errors.href }}
                                </div>
                            </div>
                        </div>
                        <div class="form-group"
                             :class="{'has-error' : live.errors.target}">
                            <label class="col-sm-2 control-label">目标</label>
                            <div class="col-sm-10">
                                <select v-model="live.menuItem.target" class="form-control">
                                    <option value="_self">_self</option>
                                    <option value="_blank">_blank</option>
                                    <option value="_top">_top</option>
                                </select>
                                <div class="text-danger" v-if="live.errors.target">
                                    {{ live.errors.target }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <button @click.prevent="update" type="button" :id="'update-' + id" class="btn btn-primary" disabled><i class="fa fa-sync-alt"></i> Update</button>
                        <button @click.prevent="add" type="button" :id="'add-' + id" class="btn btn-success"><i class="fa fa-plus"></i> Add</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
document.addEventListener("DOMContentLoaded", function () {
    Vue.component('menu-editor', {
        template: document.getElementById('tpl-menu-editor'),
        props: {
            id: {
                default: function () {
                    return "me-" + Date.now();
                }
            },
            menu: {
                default: function () {
                    return [];
                }
            }
        },
        data: function () {
            return {
                languageCode: '#(i18n.getTag())',
                editor: null,
                picker: null,
                languages: [],
                newMenu: [],
                default: {
                    menuItem: {
                        id: null,
                        name: {},
                        href: null,
                        icon: null,
                        target: null
                    },
                    errors: {
                        name: {}
                    }
                },
                live: {
                    menuItem: {},
                    errors: {}
                }
            }
        },
        created: function () {
            this.init()
            this.clear()
        },
        watch: {
            menu: {
                handler: function (nV, oV) {
                    this.newMenu = _.cloneDeep(nV)
                    this.setData()
                },
                deep: true
            }
        },
        mounted: function () {
            this.create()
        },
        methods: {
            init: function () {
                let self = this;
                self.newMenu = _.cloneDeep(self.menu)
                self.live = _.cloneDeep(self.default)
                gateway.post('api/system/localisation/language/list').then(function (response) {
                    let languages = response.data.languages
                    _.forEach(languages, function (language) {
                        self.live.menuItem.name[language.languageCode] = ''
                        self.live.errors.name[language.languageCode] = ''
                        self.default.errors.name[language.languageCode] = ''
                    })
                    self.live.menuItem = _.cloneDeep(self.live.menuItem)
                    self.live.errors = _.cloneDeep(self.live.errors)
                    self.default.errors = _.cloneDeep(self.default.errors)
                    self.languages = _.cloneDeep(languages)
                })
            },
            create: function () {
                let self = this
                self.editor = new MenuEditor('ul-' + self.id, {
                    maxLevel: 4,
                    form: function (data, jf) {     // 渲染form
                        self.live.menuItem = _.cloneDeep(data)
                    },
                    data: function () {             // 预处理数据
                        return self.live.menuItem;
                    },
                    reset: function () {            // 重置form
                        self.live.menuItem = _.cloneDeep(self.default.menuItem)
                    },
                    updated: function () {          // 内容更新
                        self.newMenu = JSON.parse(self.editor.getString())
                        self.$emit("updated", self.newMenu)
                    },
                    render: function (d) {          // li 渲染
                        return {text: d.name[self.languageCode], icon: d.icon}
                    },
                    validate: function (data, cb) {         // 验证数据
                        self.clear()
                        let i = layer.load(2)
                        gateway.post('api/system/admin-menu/validate', self.live.menuItem).then(function (response) {
                            let data = response.data;
                            self.live.errors = _.assign(self.live.errors, data.errors || {});
                            if (Object.keys(data.errors || {}).length === 0) {
                                cb();
                            }
                        }).finally(() => {
                            layer.close(i)
                        })
                    }
                });
                self.setData()
                self.editor.setForm($(document.getElementById('form-' + self.id)));
                self.editor.setUpdateButton($(document.getElementById('update-' + self.id)));
                self.picker = $(document.getElementById('form-' + self.id)).find('.menu-item-icon');
                self.picker.iconpicker({
                    hideOnSelect: true,
                    fullClassFormatter: function (val) {
                        return 'fa ' + val;
                    }
                });
                self.picker.on('iconpickerSelected', function (event) {
                    self.live.menuItem.icon = "fa " + event.iconpickerValue
                });
            },
            setData: function () {
                this.editor.setData(this.newMenu)
                $(document.getElementById('ul-' + this.id)).find(".sortableListsOpener").trigger("mousedown");
            },
            update: function () {
                this.editor.update()
            },
            add: function () {
                this.editor.add()
            },
            clear: function () {
                this.live.errors = _.cloneDeep(this.default.errors)
            }
        }
    })
})
</script>
